<template>
	<view>
		<tui-bottom-popup :show="show">
			<tui-list-cell :hover="false">
				<view class="tui-pay-item__title">
					<image src="/static/logo.jpg" mode=""></image>
					<view class="nicheng">设置你的收货信息</view>
					<view class="zhanshi">用于购物提货</view>
				</view>
			</tui-list-cell>
			<radio-group>
				<tui-list-cell  padding='10rpx 30rpx'>
					<label class="tui-pay-item">
						<text class="text">姓名</text>
						<view class="tui-radio" style="margin-left: 20rpx;width: 500rpx;">
							<input v-model="nickname" type="text" placeholder="请输入姓名">
						</view>
					</label>
				</tui-list-cell>
				<tui-list-cell  padding='10rpx 30rpx'>
					<label class="tui-pay-item">
						<text class="text">手机号</text>
						<view class="tui-radio" style="margin-left: 20rpx;width: 500rpx;">
							<input v-model="phone" type="phone" maxlength="11" placeholder="请输入手机号">
						</view>
					</label>
				</tui-list-cell>
				<!-- <tui-list-cell  padding='10rpx 30rpx'>
					<label class="tui-pay-item">
						<text class="text">收货地址</text>
						<view class="tui-radio" style="margin-left: 20rpx;width: 500rpx;" @click="shengshow=true">
							{{selectInfo.address||'请选择地址'}}
						</view>
					</label>
				</tui-list-cell> -->
				<tui-list-cell  padding='10rpx 30rpx'>
					<label class="tui-pay-item">
						<text class="text">收货地址</text>
						<view class="tui-radio" style="margin-left: 20rpx;width: 500rpx;" @click="showMulLinkageThreePicker">
							{{textquyu}}
						</view>
					</label>
				</tui-list-cell>
				<tui-list-cell  padding='10rpx 30rpx'>
					<label class="tui-pay-item">
						<text class="text">详细地址</text>
						<view class="tui-radio" style="margin-left: 20rpx;width: 500rpx;">
							<input v-model="address" type="text"  placeholder="请输入详细地址">
						</view>
					</label>
				</tui-list-cell>
			</radio-group>
			<view class="tui-btn-pay flex flex-align">
				<view class="flex-1"  @click="btnPay">确认</view>
			</view>
		</tui-bottom-popup>
		<mpvue-city-picker themeColor="#222" ref="mpvueCityPicker"
		 @onCancel="onCancel" @onConfirm="onConfirm"></mpvue-city-picker>
		<!-- <Flame-chooseLocation :exact="exact" v-model="shengshow" mapkey="WLVBZ-HXTCQ-CQ45I-2GIWK-VBREJ-UPFT3" @confirm="confirm"></Flame-chooseLocation> -->
	</view>
</template>

<script>
	import mpvueCityPicker from '@/components/mpvue-citypicker/mpvueCityPicker.vue'
	export default {
		components: {
			mpvueCityPicker
		},
		name: 'tuiLogin',
		props: {
			//控制显示
			show: {
				type: Boolean,
				default: false
			},
			page:{
				type:Number,
				default:1
			},
			data:{
				type:Object,
				default: function() {
					return {
						money: 0, 
						yue: 60
					}
				}
			},
		},
		data() {
			return {
				index:1,
				phone:'',
				nickname:'',
				address:'',
				shengshow:false,
				selectInfo:'',
				exact:false,
				area:'',
				province:'',
				city:'',
				address:'',
				textquyu:'省市区县、乡镇等',
			};
		},
		ready(){
			
			
		},
		created(){
			this.exact = this.isWeiXinBrowser()
		},
		methods: {
			close() {
				this.$emit("close",{})
			},
			showMulLinkageThreePicker() {
				this.$refs.mpvueCityPicker.show()
			},
			isWeiXinBrowser() {
			  let ua = window.navigator.userAgent.toLowerCase();
			  if (ua.match(/MicroMessenger/i) == 'micromessenger') {
			    return true;
			  } else {
			    return false;
			  }
			},
			onCancel(e) {
				console.log(e)
			},
			onConfirm(e) {
				console.log(e[0].province)
				let that = this
				that.province = e[0].province
				that.city = e[0].city
				that.area = e[0].area
				that.textquyu = e[0].province+e[0].city+e[0].area
			},
			getupload(e){
				let that = this
				that.headerimg = e.target.avatarUrl
				// that.tui.request("api.auth.center/set", "PUT",{headimg:e.target.avatarUrl} , false, true, true).then((res) => {
				// 	that.tui.toast(res.info)
				// 	if(res.code==1){
				// 		setTimeout(()=>{
				// 			 that.getData()
				// 		},1500)
				// 	}
					
				// }).catch((res) => {})
			},
			getName(e){
				
			},
			btnPay(){
				let that = this
				if(!that.nickname){
					that.tui.toast("姓名不能为空")
					return
				}
				if(!that.tui.isValidPhoneNumber(that.phone)){
					that.tui.toast("手机号格式有误")
					return
				}
				if(that.textquyu=='省市区县、乡镇等'){
					that.tui.toast("地址不能为空")
					return
				}
				if(!that.address){
					that.tui.toast("详细地址不能为空")
					return
				}
				let data = {phone:that.phone,username:that.nickname,address:that.address,province:that.province,city:that.city,area:that.area}
				that.tui.request("api.auth.center/blindAddressInfo", "post",data , false, true, true).then((res) => {
					that.tui.toast(res.info)
					if(res.code==1){
						that.$emit("close",{})
					}
					
				}).catch((res) => {})
			},
			confirm(val) {
				console.log(val)
				this.selectInfo = val
			},
		}
	}
</script>

<style scoped lang="scss">
	.tui-pay-item__title {
		width: 100%;
		padding: 20rpx;
		box-sizing: border-box;
		position: relative;
		.nicheng{font-size: 34rpx;font-weight: bold;margin-bottom: 10rpx;}
		.zhanshu{color: #999;font-size: 24rpx;}
		image{width: 144rpx;height: 144rpx;}
	}
	.close{
		position: absolute;top: 0rpx;right: 20rpx;
	}
	.tui-pay-amuont {
		padding-top: 30rpx;
		color: #000;
		text-align: center;
		font-weight: 500;
		font-size: 40rpx;font-weight: bold;
	}
	.text{margin-left: 20rpx;width:120rpx}
	.tui-pay-item {
		width: 100%;
		height: 80rpx;
		display: flex;
		align-items: center;
		box-sizing: border-box;
		font-size: 28rpx;
	}

	.tui-pay-logo {
		width: 48rpx;
		height: 48rpx;
		margin-right: 15rpx;
	}

	.tui-radio {
		button{background: transparent;
			image{width: 80rpx;height: 80rpx;}
		}
	}

	.tui-btn-pay {
		width: 100%;
		padding: 100rpx 35rpx 50rpx 35rpx;
		box-sizing: border-box;
		view{background: #f20;text-align: center;line-height: 90rpx;color: #fff;}
	}

	.tui-recharge {
		color: #fc872d;
		margin-left: auto;
		padding: 12rpx 0;
	}
</style>